<template>
    <form>
      <table align="center" cellspacing="1" cellpadding="10" border="1">
        <tr rowspan="2">
          <td colspan="7" align="center">
            按品牌搜索&nbsp;
            <select v-model="tid">
              <option :value="-1">全部</option>
              <option :value="type.id" v-for="(type,index) in typeList":key="index">{{type.name}}</option>
            </select>&nbsp;
            <button @click.prevent="showCar(1)">查找</button>
           </td> 
        </tr>
        <tr>
          <td>编号</td>
          <td>型号</td>
          <td>价格</td>
          <td>速度</td>
          <td>生产日期</td>
          <td>品牌</td>
          <td>操作</td>
        </tr>
        <tr v-for="(car ,index) in pageInfo.list":key="index">
          <td>{{car.id}}</td>
          <td>{{car.name}}</td>
          <td>{{car.price}}</td>
          <td>{{car.speed}}</td>
          <td>{{car.createDate}}</td>
          <td>{{car.ct.name}}</td>
          <td>
            <router-link :to="{path:'/insertCar'}">添加</router-link>&nbsp;
            <router-link :to="{path:'/updateCar',query:{car:car}}">修改</router-link>&nbsp;
            <a href="#" @click="deleteCar(car.id)">删除</a>&nbsp;
          </td>
        </tr>
        <tr>
          <td colspan="7" align="center">
            <a href="#" @click.prevent="showCar(1)">首页</a>&nbsp;
            <a href="#" v-if="pageInfo.hasPreviousPage" @click.prevent="showCar(pageInfo.prePage)">上一页</a>&nbsp;
            <a href="#"v-if="pageInfo.hasNextPage" @click.prevent="showCar(pageInfo.nextPage)">下一页</a>&nbsp;
            <a href="#" @click.prevent="showCar(pageInfo.pages)">末页</a>&nbsp;
           </td>
        </tr>
      </table>
    </form>
</template>

<script>
    export default {
     name: "ShowCar",
      data(){
       return{
         pageInfo:{},
         typeList:[],
         tid:-1
       }
      },
      methods:{
       deleteCar(id){
         let flag=confirm("确认删除吗？")
         if(!flag){
           return;
         }
         this.axios({
           method:"get",
           url:"/car/deleteCar.do",
           params:{
             id:id
           }
         }).then((res)=>{
           alert("删除成功！！")
           this.showCar(1)
         })
       },
       showCar(pageNum){
         this.axios({
           method:"get",
           url:"car/selectCarByPage.do",
           params:{
             tid:this.tid,
             pageNum:pageNum
           }
         }).then((res)=>{
           this.pageInfo=res.data
         }),
           this.axios({
             method:"get",
             url:"/carType/selectAllType.do"
           }).then((res)=>{
             this.typeList=res.data
           })
       }
      },
      created() {
       this.showCar(1)
      }
    }
</script>

<style scoped>

</style>
